<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加中在线商城</title>
    <!--引入ElementUI的样式文件-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .el-main {
            background-color: #FFFFFF;
            color: #333;
            /*text-align: center;*/
            line-height: 30px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }



        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }



        .image {
            width: 200px;
            height: 300px;
            display: block;
        }
    </style>
</head>
<body>
    <div id="index-container">
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <el-row>
                    <el-col :span="4" v-for="(book, index) in bookList" :key="book" :offset="index > 0 ? 0 : 0">

                        <el-card :body-style="{ padding: '0px' }">
                            <img :src="'/images/books/'+book.bookImage" class="image">
                            <div>
                                <div style="display: block;height: 30px;border:0px solid red;padding-left: 30px;">
                                    <a :href="'showBookDesc.html?bookId='+book.bookId">书名:{{book.bookName}}</a>
                                </div>
                                <div style="padding-left: 30px;">
                                    单价:{{book.bookPrice}}
                                </div>
                                <div style="display: block;height: 30px;margin-bottom: 20px;padding-left: 30px;">
                                    <el-input-number size="small" :min="1" :max="10000" v-model="count"></el-input-number>
                                    <el-button type="warning" icon="el-icon-shopping-cart-full" size="small" plain>加入购物车</el-button>

                                </div>

                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </div>

<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/axios.min.js"></script>

<script>
    //创建Vue对象
    new Vue({
        //指定VUE要渲染的元素(简单说:就是网页中那些位置可以使用VUE)
        el:'#index-container',

        /*
            Vue的数据区(属性区)
            你可以简单的认为是Java中的属性
        */
        data(){
            return{
                bookList:[],//用于存放商品的列表的数组
                count:1,//加入购物车的数量默认值
            }
        },
        /**
         * VUE的方法区，此处存放的是方法
         * 你可以简单的理解为是Java中的方法
         * */
        methods:{
            /**
             * 获得商品列表
             */
            getBooks(){
                axios
                    //指定服务端处理器的路径
                    .get('books/queryBooks')
                /**
                 *  当请求和响应成功后自动执行then中的内容
                 *  response:这个对象很重要
                 *  当服务端处理成功后，将结果自动封装到该对象中
                 *  response对象包含两个重要信息:
                 *      1.data:其中的数据为服务端回传的我们主动查询的数据
                 *      2.status:状态码,200表示成功
                 */

                    .then((response)=>{
                        //将服务端回传的数据赋给数组
                        this.bookList = response.data;
                           console.log(this.bookList);
                    })
                    //当请求或响应失败后自动执行catch中的内容
                    .catch((err)=>{
                        console.log(err);
                    });
            }
        },
        //钩子函数，该函数在DOM结构在内存中形成前执行
        created(){
            //调用查询商品列表方法
            this.getBooks();
        },

    });

</script>


</body>
</html>